<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户搜索</title>
    <style type="text/css">
        a{
            text-decoration: none;
        }
        .content {
            width: 643px;
            margin: 100px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button'] {
            width: 100px;
            height: 46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px
        }

        .show {
            position: absolute;
            width: 535px;
            height: 100px;
            border: 1px solid #999;
            border-top: 0;
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <form autocomplete="off">
        <div class="content">
            <img src="img/logo.jpg">
            <br/><br/>
            <input type="text" id="username" @change="search" :value="val">
            <input type="button" value="搜索一下">
            <div id="show" class="show"></div>
        </div>
    </form>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    let val = new Vue({
        el: "#app",
        data: {
            val:""
        },
        methods: {
            search() {
                //alert("哈哈")
                let val = $("#username").val()
                if (val == null || $.trim(val) == "") {//如果输入内容不为空
                    $("#show").hide();
                    return;

                }
                axios.get("user?username="+val)
                    .then(res => {
                        let names = "";
                        if (res.data.length > 0) {
                            for (let i = 0; i < (res.data).length; i++) {
                                //alert(res.data[i]);
                                names += "<div><a href='https://www.baidu.com'>" + res.data[i].name + "</a></div>";
                            }
                            $("#show").html(names);
                            $("#show").show();
                        }else{
                            $("#show").hide();
                        }

                    });


            }

        }

    });
</script>
</html>